<template>
  <section class="login-container">
    <el-form class="login-form" ref="loginFormRef" :model="loginForm" :rules="loginFormRules">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item prop="account">
        <el-input
          v-model="loginForm.account"
          placeholder="请输入用户名"
          name="account"
          type="text"
          clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><def-icon icon="user" /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          name="password"
          type="password"
          @keyup.enter="submitForm"
          clearable>
          <template #prefix>
            <el-icon class="el-input__icon"><def-icon icon="lock" /></el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-checkbox v-model="loginForm.isRemember" label="记住我" @keyup.enter="submitForm"></el-checkbox>
      <div class="form-btn">
        <el-button type="primary" size="large" @click="submitForm">登录</el-button>
        <el-button size="large" @click="resetForm">重置</el-button>
      </div>
      <h1 style="margin: 20px 0;">{{loginForm}}</h1>
    </el-form>
  </section>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus/es'
import { useUserStore } from '@/store/user'
import { useCrypto } from '@/utils'

const userStore = useUserStore()
// 定义数据
const loginForm = ref({ ...userStore.loginForm } || {
  account: '',
  password: '',
  isRemember: false
})
// 获取登录表单实例
const loginFormRef = ref<FormInstance>()
// 登录表单验证规则
const loginFormRules = reactive<FormRules>({
  account: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
    { min: 3, message: '用户名长度必须大于3', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 3, message: '密码长度必须大于3', trigger: 'blur' }
  ]
})
// 密码解密
const passwordDecrypt = () => {
  loginForm.value.password && (loginForm.value.password = useCrypto.decrypt(loginForm.value.password, 'user'))
}
// 登录前解密
passwordDecrypt()

// 提交登录
const submitForm = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      // 登录时解密
      // passwordDecrypt()
      // 登录
      userStore.loginAction(loginForm.value)
    } else {
      console.log('error login!', fields)
    }
  })
}
// 重置表单
const resetForm = () => {
  if (!loginFormRef.value) return
  loginFormRef.value.resetFields()
  loginForm.value = {
    account: '',
    password: '',
    isRemember: false
  }
}
</script>

<style scoped lang="scss">
  $bg: #2d3a4b;
  $dark_gray: #889aa4;
  $light_gray: #eee;
  $cursor: #fff;

  .login-container {
    min-height: 100%;
    width: 100%;
    background-color: $bg;
    overflow: hidden;
    position: relative;

    .login-form {
      @include posCenterXY;
      top: 40%;
      width: 520px;
      max-width: 100%;
      //padding: 160px 35px 0;
      //margin: 0 auto;
      overflow: hidden;
      .title-container {
        position: relative;

        .title {
          font-size: 26px;
          color: $light_gray;
          margin: 0px auto 40px auto;
          text-align: center;
          font-weight: bold;
        }
      }
      ::v-deep(.el-form-item) {
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
        color: #454545;
        margin-bottom: 20px;
        .el-input {
          display: inline-block;
          height: 47px;
          .el-input__wrapper{
            width: 100%;
            background: transparent;
            border: none;
            padding: 0 20px;
            .el-input__inner{
              -webkit-appearance: none;
              color: $light_gray;
              height: 47px;
              caret-color: $cursor;
            }
          }
        }
      }
      .el-checkbox{
        color: $light_gray;
        padding-left: 10px;
        margin-bottom: 20px;
      }
      .form-btn{
        @include flexRowSa;
        .el-button{
          flex: 1;
          &:first-of-type{
            margin-right: 15%;
          }
        }
      }
    }
  }
</style>
